<template>
  <div
    v-loading="loading"
    class="imgInput"
    :style="{ width, height }"
    @mouseenter.prevent="showTips"
    @mouseleave.prevent="showTips"
    @mouseover.prevent="showTips"
    @drop="loadFile"
    @dragenter.prevent="showTips"
    @dragover.prevent="showTips"
    @click="getFile"
  >
    <div v-if="tips" class="tips">
      <div class="icon el-icon-picture-outline" />
      <div>{{ emptyText }}</div>
    </div>
    <input
      v-show="false"
      ref="file"
      type="file"
      accept=".jpg,.png,.gif"
      @change="loadFile"
    />
    <div
      v-if="!tips && !disabled"
      class="removeBtn el-icon-error"
      @click.stop="removeFile"
    />
    <el-image class="cover" :src="img">
      <template #error>
        <div class="tips" />
      </template>
    </el-image>
  </div>
</template>

<script>
import { uploadFileUploadFile } from "@/api";
export default {
  name: "FormSingleImageFile",
  props: {
    imgType: {
      type: String,
      default: "avatar"
    },
    value: {
      type: String,
      default: ""
    },
    emptyText: {
      type: String,
      default: "点击或将图片拖到此处上传"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      default: "200px"
    },
    height: {
      default: "150px"
    }
  },
  data() {
    return {
      msg: "",
      loading: false,
      blob: null
    };
  },
  computed: {
    img: {
      get() {
        return this.value;
      },
      set(e) {
        this.$emit("input", e);
      }
    },
    tips() {
      if (!this.value) {
        return true;
      }
      return false;
    }
  },
  watch: {
    img(n, o) {
      if (!n) {
        this.$refs.file.value = "";
      }
    }
  },
  methods: {
    showTips(e) {
      e.preventDefault();
      //
    },
    getFile() {
      if (this.disabled) {
        return;
      }
      this.$el.querySelector("input").click();
    },
    async loadFile(e) {
      this.loading = true;
      if (e) {
        e.preventDefault();
      }
      const files = e.srcElement.files[0];
      const blob = files.slice(0, files.size, "image/png");
      const newFile = new File([blob], files.name.replace(/[^\w\.]/gi, ""), {
        type: "image/png"
      });
      const formData = new FormData();

      formData.append("files", newFile);
      //   formData.append("type", this.imgType);
      try {
        let res = await uploadFileUploadFile(formData);
        this.img = res.data;
      } catch (error) {
        this.$Msg.error({
          message: "图片上传失败"
        });
      }
      this.loading = false;
    },
    removeFile(e) {
      if (e) {
        e.preventDefault();
      }
      this.img = "";
      this.blob = null;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~element-ui/packages/theme-chalk/src/common/var";
.imgInput {
  position: relative;
  min-width: 50px;
  min-height: 50px;
  border: 2px dashed #eee;
  border-radius: $--border-radius-base;
}
.cover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  cursor: pointer;
  .image-slot {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: white;
  }
}
.removeBtn {
  color: $--color-danger;
  z-index: 1000;
  position: absolute;
  right: 0px;
  top: 0px;
  transform: translateX(50%) translateY(-50%);
  background-color: white;
  border-radius: 100%;
  box-shadow: $--box-shadow-dark;
  cursor: pointer;
}
.tips {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0px;
  z-index: 10;
  user-select: none;
  color: $--color-text-secondary;
  font-size: $--font-size-base;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 8px;
  .icon {
    font-size: 30px;
    padding: 8px;
  }
}
</style>
